<template>
  <div class="partners">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">合作伙伴</h1>
        <p class="page-subtitle">感谢所有合作伙伴的支持与信任</p>
      </div>
    </div>

    <div class="container">
      <!-- 合作伙伴概览 -->
      <section class="partners-section">
        <h2 class="section-title">合作伙伴概览</h2>
        <div class="overview-content">
          <div class="overview-stats">
            <div class="stat-item">
              <span class="stat-number">100+</span>
              <span class="stat-label">合作伙伴</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">20+</span>
              <span class="stat-label">行业领域</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">15+</span>
              <span class="stat-label">合作年限</span>
            </div>
          </div>
          <div class="overview-text">
            <h3>携手共创未来</h3>
            <p>FAIR plus机器人全产业链接会汇聚了来自全球的顶尖企业和机构，我们与众多合作伙伴建立了长期稳定的合作关系，共同推动机器人产业的发展。</p>
          </div>
        </div>
      </section>

      <!-- 合作伙伴分类 -->
      <section class="partners-section">
        <h2 class="section-title">合作伙伴分类</h2>
        <div class="partners-categories">
          <div class="category-item" v-for="category in partnerCategories" :key="category.id">
            <div class="category-header">
              <div class="category-icon">
                <el-icon><component :is="category.icon" /></el-icon>
              </div>
              <h3>{{ category.name }}</h3>
            </div>
            <p class="category-description">{{ category.description }}</p>
            <div class="partners-grid">
              <div class="partner-logo" v-for="partner in category.partners" :key="partner.id">
                <img :src="partner.logo" :alt="partner.name">
                <div class="partner-info">
                  <h4>{{ partner.name }}</h4>
                  <p>{{ partner.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 战略合作伙伴 -->
      <section class="partners-section">
        <h2 class="section-title">战略合作伙伴</h2>
        <div class="strategic-partners">
          <div class="strategic-partner" v-for="partner in strategicPartners" :key="partner.id">
            <div class="partner-logo-large">
              <img :src="partner.logo" :alt="partner.name">
            </div>
            <div class="partner-details">
              <h3>{{ partner.name }}</h3>
              <p class="partner-description">{{ partner.description }}</p>
              <div class="partner-highlights">
                <div class="highlight-item" v-for="highlight in partner.highlights" :key="highlight">
                  <el-icon><Check /></el-icon>
                  <span>{{ highlight }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 合作优势 -->
      <section class="partners-section">
        <h2 class="section-title">合作优势</h2>
        <div class="advantages-grid">
          <div class="advantage-item" v-for="advantage in cooperationAdvantages" :key="advantage.id">
            <div class="advantage-icon">
              <el-icon><component :is="advantage.icon" /></el-icon>
            </div>
            <h3>{{ advantage.title }}</h3>
            <p>{{ advantage.description }}</p>
          </div>
        </div>
      </section>

      <!-- 合作申请 -->
      <section class="partners-section">
        <h2 class="section-title">合作申请</h2>
        <div class="cooperation-content">
          <div class="cooperation-info">
            <h3>成为我们的合作伙伴</h3>
            <p>我们欢迎更多优秀的企业和机构加入我们的合作伙伴网络，共同推动机器人产业的发展。</p>
            <div class="cooperation-benefits">
              <div class="benefit-item" v-for="benefit in cooperationBenefits" :key="benefit.id">
                <el-icon><component :is="benefit.icon" /></el-icon>
                <span>{{ benefit.title }}</span>
              </div>
            </div>
          </div>
          <div class="cooperation-form">
            <form @submit.prevent="submitCooperation" class="cooperation-form-content">
              <div class="form-row">
                <div class="form-group">
                  <label for="companyName">公司名称 *</label>
                  <input type="text" id="companyName" v-model="cooperationForm.companyName" required>
                </div>
                <div class="form-group">
                  <label for="contactPerson">联系人 *</label>
                  <input type="text" id="contactPerson" v-model="cooperationForm.contactPerson" required>
                </div>
              </div>
              <div class="form-row">
                <div class="form-group">
                  <label for="contactPhone">联系电话 *</label>
                  <input type="tel" id="contactPhone" v-model="cooperationForm.contactPhone" required>
                </div>
                <div class="form-group">
                  <label for="contactEmail">电子邮箱 *</label>
                  <input type="email" id="contactEmail" v-model="cooperationForm.contactEmail" required>
                </div>
              </div>
              <div class="form-group">
                <label for="cooperationType">合作类型 *</label>
                <select id="cooperationType" v-model="cooperationForm.cooperationType" required>
                  <option value="">请选择合作类型</option>
                  <option value="sponsor">赞助商</option>
                  <option value="media">媒体合作</option>
                  <option value="technology">技术合作</option>
                  <option value="service">服务合作</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <div class="form-group">
                <label for="cooperationProposal">合作提案</label>
                <textarea id="cooperationProposal" v-model="cooperationForm.cooperationProposal" rows="4" placeholder="请描述您的合作提案..."></textarea>
              </div>
              <button type="submit" class="submit-btn">提交合作申请</button>
            </form>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { 
  Star, 
  Connection, 
  Service, 
  User,
  Document,
  Check,
  Phone,
  Message,
  Location
} from '@element-plus/icons-vue'
import { subpageApi } from '@/api/user'

export default {
  name: 'Partners',
  components: {
    Star,
    Connection,
    Service,
    User,
    Document,
    Check,
    Phone,
    Message,
    Location
  },
  setup() {
    const partnerCategories = ref([])
    const strategicPartners = ref([])
    const cooperationAdvantages = ref([])
    const cooperationBenefits = ref([])
    const cooperationForm = ref({
      companyName: '',
      contactPerson: '',
      contactPhone: '',
      contactEmail: '',
      cooperationType: '',
      cooperationProposal: ''
    })

    // 加载合作伙伴分类数据
    const loadPartnerCategories = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'partner-categories')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              partnerCategories.value = contentData.categories || []
            } catch (e) {
              console.error('解析合作伙伴分类数据失败:', e)
              partnerCategories.value = []
            }
          } else {
            partnerCategories.value = []
          }
        } else {
          partnerCategories.value = []
        }
      } catch (error) {
        console.error('加载合作伙伴分类数据失败:', error)
        partnerCategories.value = []
      }
    }

    // 加载战略合作伙伴数据
    const loadStrategicPartners = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'strategic-partners')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              strategicPartners.value = contentData.partners || []
            } catch (e) {
              console.error('解析战略合作伙伴数据失败:', e)
              strategicPartners.value = []
            }
          } else {
            strategicPartners.value = []
          }
        } else {
          strategicPartners.value = []
        }
      } catch (error) {
        console.error('加载战略合作伙伴数据失败:', error)
        strategicPartners.value = []
      }
    }

    // 加载合作优势数据
    const loadCooperationAdvantages = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'cooperation-advantages')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              cooperationAdvantages.value = contentData.advantages || []
            } catch (e) {
              console.error('解析合作优势数据失败:', e)
              cooperationAdvantages.value = []
            }
          } else {
            cooperationAdvantages.value = []
          }
        } else {
          cooperationAdvantages.value = []
        }
      } catch (error) {
        console.error('加载合作优势数据失败:', error)
        cooperationAdvantages.value = []
      }
    }

    // 加载合作收益数据
    const loadCooperationBenefits = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'cooperation-benefits')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              cooperationBenefits.value = contentData.benefits || []
            } catch (e) {
              console.error('解析合作收益数据失败:', e)
              cooperationBenefits.value = []
            }
          } else {
            cooperationBenefits.value = []
          }
        } else {
          cooperationBenefits.value = []
        }
      } catch (error) {
        console.error('加载合作收益数据失败:', error)
        cooperationBenefits.value = []
      }
    }

    // 提交合作申请
    const submitCooperation = () => {
      // TODO: 实现提交逻辑
      console.log('提交合作申请:', cooperationForm.value)
    }

    onMounted(() => {
      loadPartnerCategories()
      loadStrategicPartners()
      loadCooperationAdvantages()
      loadCooperationBenefits()
    })

    return {
      partnerCategories,
      strategicPartners,
      cooperationAdvantages,
      cooperationBenefits,
      cooperationForm,
      submitCooperation
    }
  }
}
</script>

<style scoped>
.partners {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.partners-section {
  margin: 80px 0;
  padding: 60px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.overview-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  font-weight: 600;
}

.overview-text h3 {
  font-size: 1.8rem;
  color: #ffd700;
  margin-bottom: 1rem;
}

.overview-text p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  font-size: 1.1rem;
}

.partners-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.category-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.category-item:hover {
  transform: translateY(-5px);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.category-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon .el-icon {
  font-size: 1.5rem;
  color: #320063;
}

.category-header h3 {
  font-size: 1.3rem;
  color: #ffd700;
  margin: 0;
  font-weight: 600;
}

.category-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.partner-logo {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: translateY(-3px);
}

.partner-logo img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.partner-info h4 {
  font-size: 0.8rem;
  color: #ffd700;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.partner-info p {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.strategic-partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.strategic-partner {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.strategic-partner:hover {
  transform: translateY(-5px);
}

.partner-logo-large {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.partner-logo-large img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.partner-details h3 {
  font-size: 1.3rem;
  color: #ffd700;
  margin-bottom: 1rem;
  font-weight: 600;
}

.partner-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.partner-highlights {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

.highlight-item .el-icon {
  color: #ffd700;
  font-size: 1rem;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.advantage-item {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.advantage-item:hover {
  transform: translateY(-5px);
}

.advantage-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.advantage-icon .el-icon {
  font-size: 1.5rem;
  color: #320063;
}

.advantage-item h3 {
  font-size: 1.2rem;
  color: #ffd700;
  margin-bottom: 1rem;
  font-weight: 600;
}

.advantage-item p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .partners-section {
    padding: 40px 20px;
    margin: 40px 0;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .overview-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .overview-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .partners-categories {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .strategic-partners {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .strategic-partner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .advantages-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style> 